<template>
  <view class="setting">
    <view class="setting-list">
      <view class="list flex flex-align flex-bt">
        <view class="left">头像</view>
        <view class="right flex flex-align" @click="upheader">
          <image :src="getImgUrl(dataInfo.head_image)" mode="scaleToFill" />
          <uni-icons type="right" size="16" color="#333"></uni-icons>
        </view>
      </view>
      <view class="list flex flex-align flex-bt">
        <view class="left">昵称</view>
        <view class="right flex flex-align" @click="inputDialogToggle">
          <view>{{dataInfo.name}}</view>
          <uni-icons type="right" size="16" color="#333"></uni-icons>
        </view>
      </view>
      <view class="list flex flex-align flex-bt">
        <view class="left">手机号</view>
        <view class="right flex flex-align">
          <view>{{dataInfo.pickup_phone}}</view>
          <uni-icons type="right" size="16" color="#333"></uni-icons>
        </view>
      </view>
    </view>
    <view class="setting-list">
      <view class="list flex flex-align flex-bt">
        <view class="left">ID</view>
        <view class="right flex flex-align">
          <view>{{dataInfo.id}}</view>
          <image @click="copy(dataInfo.id)" class="fuzhi" src="/static/user/user27.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="list flex flex-align flex-bt">
        <view class="left">邀请码</view>
        <view class="right flex flex-align">
          <view>{{dataInfo.invite_code}}</view>
          <image @click="copy(dataInfo.invite_code)" class="fuzhi" src="/static/user/user27.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="list flex flex-align flex-bt">
        <view class="left">会员等级</view>
        <view class="right flex flex-align">
          <view>尊享会员</view>
        </view>
      </view>
    </view>
    <view class="footer" @click="eitInfo">
      <view class="footer-text">
        保存
      </view>
    </view>
    <uni-popup ref="inputDialogRef" type="dialog">
      <uni-popup-dialog class="inputClose" confirm-button-color="#FE7431" ref="inputClose"  mode="input" title="昵称" value="请输入新昵称"
        placeholder="请输入新昵称" @confirm="dialogInputConfirm">
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { copy, getImgUrl, uploadFile } from '@/utils/tools';
import { useAuthStore } from '@/stores/counter'
import { computed, ref } from 'vue';
import { updateUserInfo } from '@/api/user';
const inputDialogRef = ref()
const inputClose = ref()
const store=useAuthStore();
const dataInfo = computed(() => store.dataUser)
console.log(dataInfo.value)
const inputDialogToggle = () => {
  inputDialogRef.value.open()
}
const parme = ref({
  name:'',
  head_image:''
})
const dialogInputConfirm = (e:any) => {
  parme.value.name = e
  dataInfo.value.name = e
}
const upheader = async ()=>{
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: function (e) {
      uni.showLoading({
        title: '上传中',
        mask: true
      })
      uploadFile(e.tempFilePaths[0]).then((res:any)=>{
        uni.hideLoading()
        parme.value.head_image = '/'+res.fileName
        dataInfo.value.head_image = '/'+res.fileName
      })
    }
  });
}
// 更新用户信息
async function eitInfo (){
  try {
    if (!parme.value.name&&!parme.value.head_image) {
      uni.showToast({
        title: '请先编辑头像或昵称再提交',
        icon: 'none',
        duration: 1000
      })
      return
    }
    const res = await updateUserInfo(parme.value)
    // 等待 getUserInfo 完成
    await store.getUserInfo() 
    uni.showToast({
      title: '信息更新成功',
      icon: 'none',
      duration: 1000
    })
  } catch (error) {
    console.error('更新用户信息失败:', error)
  }
}
</script>

<style scoped lang="scss">
  .uni-button-color{
    color: #000!important;
  }
  .setting{
    padding: 30rpx;
    .setting-list{margin-bottom:20rpx;
      background: #fff;border-radius: 20rpx;padding: 0 20rpx;
    }
    .list{
      padding:30rpx 0 30rpx 20rpx;
      background: #fff;
      border-radius: 10rpx;
      border-bottom: 1px solid #F2F3F5;font-weight: bold;color: #323233;
      .left{
        color: #969799;
      }
      .right{
        image{width: 88rpx;height: 88rpx;margin-right: 10rpx;border-radius: 100%;}
        image.fuzhi{width: 32rpx;height: 30rpx;border-radius: 0;margin: 0 0 0 10rpx;}
      }
    }
    .footer{
      position: fixed;width: 100%;bottom: 50rpx;left: 0;box-sizing: border-box;padding:0 30rpx;
      .footer-text{
        text-align: center;
        color: #fff;
        background: #FE7431;
        padding: 20rpx 0;
        font-weight: bold;border-radius: 60rpx;
      }
    }
  }
  .inputClose{
    .uni-button-color{
      color: #000;
    }
  }
</style>